<template>
  <div class="list">
    <div class="header">
      名字<el-input v-model="input" style="width: 240px" />
      <el-button type="primary" @click="query()">查询</el-button>
      <el-button type="primary" @click="add()">新增</el-button>
    </div>
    <div class="listContent">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" width="50" />
        <el-table-column prop="userName" label="用户名" width="180" />
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="createdAt" label="创建时间" />
        <el-table-column label="操作" min-width="120">
          <template v-slot="scope">
            <el-button type="primary" :icon="Edit" circle @click="edit(scope.row)" />
            <el-button type="danger" :icon="Delete" circle @click="del(scope.row.id)" />
            <el-button type="warning" circle>
              <el-icon>
                <View />
              </el-icon>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination v-model:current-page="form.page" v-model:page-size="form.rows" :page-sizes="[10, 20, 30, 40]"
        :size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <el-dialog v-model="centerDialogVisible" :title="title" width="500" align-center>
      <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="ruleForm.userName" />
        </el-form-item>
        <el-form-item label="密码" prop="passWord" v-if="title == '新增'">
          <el-input v-model="ruleForm.passWord" />
        </el-form-item>
        <el-form-item label="权限" prop="role">
          <el-select v-model="ruleForm.role" placeholder="Select" style="width: 200px;">
            <el-option label="超级管理员" :value="1" />
            <el-option label="管理员" :value="2" />
            <el-option label="普通用户" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="管理员姓名" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            确定
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { Delete, Edit } from '@element-plus/icons-vue'
import type { ComponentSize } from 'element-plus'
import { List, DeleteData, Query, Add, EditData } from '@/api/list'

import type { FormInstance, FormRules } from 'element-plus'

interface RuleForm {
  name: string
  role: number
  userName: string
  passWord: string
  id: number
}
const title = ref('')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  name: '',
  role: 0,
  userName: '',
  passWord: '',
  id: 0
})
const passWord = ref('')

const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: '请输入管理员姓名', trigger: 'blur' },
  ],
  userName: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  passWord: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
  role: [
    { required: true, message: '请选中权限', trigger: 'blur' },
  ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (title.value === '新增') {
        Add(ruleForm).then((res) => {
          console.log(res)
          getList()
          centerDialogVisible.value = false
          formEl.resetFields()
        })
      } else {
        let obj = {
          ...ruleForm
        }
        obj.passWord = passWord.value
        EditData(obj).then((res) => {
          console.log(res)
          getList()
          centerDialogVisible.value = false
          formEl.resetFields()
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  centerDialogVisible.value = false
}


const input = ref('')
const form = reactive({
  page: 1,
  rows: 10
})
const centerDialogVisible = ref(false)
const tableData = ref([])
const total = ref()

function edit(val: any) {
  title.value = '编辑'
  console.log(val)
  ruleForm.id = val.id
  ruleForm.name = val.name
  ruleForm.role = val.role
  ruleForm.userName = val.userName
  passWord.value = "1"
  centerDialogVisible.value = true
}

function add() {
  title.value = '新增'
  ruleForm.name = ''
  ruleForm.role = 0
  ruleForm.userName = ''
  ruleForm.passWord = ''
  centerDialogVisible.value = true
}
const getList = (async () => {
  await List(form).then((res) => {
    console.log(res)
    tableData.value = res.data.list
    total.value = res.data.count
  })
})
getList()

const background = ref(true)
const disabled = ref(false)
const size = ref<ComponentSize>('default')
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  form.rows = val
  getList()
}

const query = () => {
  console.log(input.value)
  Query(input.value).then((res) => {
    tableData.value = []
    tableData.value.push(res.data)
  })
}
const del = (val: any) => {
  let id = {
    id: val
  }
  DeleteData(id).then(() => {
    getList()
  })
}

const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  form.page = val
  getList()
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}

</script>

<style scoped lang="scss">
.list {
  padding: 10px;
  box-sizing: border-box;
}

.el-input {
  margin-left: 5px;
  margin-right: 5px;
}
</style>